<template>
  <view class="service-detail">
    <!-- 服务内容 -->
    <view class="service-content">
      <!-- 服务图片 -->
      <view class="service-image">
        <image :src="serviceDetail.image" mode="aspectFill" class="image"></image>
        <view class="service-badges">
          <view class="category-badge">
            <text class="badge-text">{{ serviceDetail.categoryText }}</text>
          </view>
          <view class="rating-badge">
            <text class="badge-text">{{ serviceDetail.rating }}分</text>
          </view>
        </view>
      </view>

      <!-- 服务基本信息 -->
      <view class="service-info">
        <view class="info-header">
          <text class="service-title">{{ serviceDetail.title }}</text>
          <view class="service-price">
            <text class="price-text" :class="{ free: serviceDetail.price === 0 }">
              {{ serviceDetail.price === 0 ? '免费' : `¥${serviceDetail.price}` }}
            </text>
          </view>
        </view>

        <view class="info-body">
          <text class="service-description">{{ serviceDetail.description }}</text>
        </view>

        <view class="info-meta">
          <view class="meta-item">
            <u-icon name="user" size="16" color="#666"></u-icon>
            <view class="meta-content">
              <text class="meta-label">服务提供方</text>
              <text class="meta-value">{{ serviceDetail.provider }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="map-pin" size="16" color="#666"></u-icon>
            <view class="meta-content">
              <text class="meta-label">服务范围</text>
              <text class="meta-value">{{ serviceDetail.serviceArea }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="clock" size="16" color="#666"></u-icon>
            <view class="meta-content">
              <text class="meta-label">服务时间</text>
              <text class="meta-value">{{ serviceDetail.serviceTime }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="phone" size="16" color="#666"></u-icon>
            <view class="meta-content">
              <text class="meta-label">联系电话</text>
              <text class="meta-value" @click="handleCall">{{ serviceDetail.contactPhone }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务详情 -->
      <view class="service-details">
        <view class="section-title">
          <u-icon name="file-text" size="16" color="#666"></u-icon>
          <text class="title-text">服务详情</text>
        </view>
        <view class="details-content">
          <rich-text :nodes="serviceDetail.content"></rich-text>
        </view>
      </view>

      <!-- 服务流程 -->
      <view class="service-process">
        <view class="section-title">
          <u-icon name="list" size="16" color="#666"></u-icon>
          <text class="title-text">服务流程</text>
        </view>
        <view class="process-content">
          <view 
            v-for="(step, index) in serviceDetail.process" 
            :key="index"
            class="process-item"
          >
            <view class="step-number">{{ index + 1 }}</view>
            <view class="step-content">
              <text class="step-title">{{ step.title }}</text>
              <text class="step-description">{{ step.description }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务保障 -->
      <view class="service-guarantee">
        <view class="section-title">
          <u-icon name="shield" size="16" color="#666"></u-icon>
          <text class="title-text">服务保障</text>
        </view>
        <view class="guarantee-content">
          <view 
            v-for="(guarantee, index) in serviceDetail.guarantees" 
            :key="index"
            class="guarantee-item"
          >
            <view class="guarantee-icon">
              <u-icon name="check-circle" size="16" color="#52c41a"></u-icon>
            </view>
            <text class="guarantee-text">{{ guarantee }}</text>
          </view>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="service-reviews">
        <view class="section-title">
          <u-icon name="star" size="16" color="#666"></u-icon>
          <text class="title-text">用户评价</text>
          <text class="review-count">({{ serviceDetail.reviews.length }})</text>
        </view>
        <view class="reviews-content">
          <view 
            v-for="(review, index) in serviceDetail.reviews" 
            :key="index"
            class="review-item"
          >
            <view class="review-header">
              <view class="user-info">
                <text class="user-name">{{ review.userName }}</text>
                <view class="rating">
                  <u-rate 
                    :value="review.rating" 
                    :count="5" 
                    :size="12" 
                    active-color="#faad14"
                    inactive-color="#d9d9d9"
                    readonly
                  ></u-rate>
                </view>
              </view>
              <text class="review-time">{{ review.time }}</text>
            </view>
            <text class="review-content">{{ review.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-btn" @click="handleLike">
          <u-icon name="heart" size="18" :color="isLiked ? '#ff4757' : '#999'"></u-icon>
          <text class="btn-text" :class="{ liked: isLiked }">{{ isLiked ? '已点赞' : '点赞' }}</text>
        </view>
        <view class="action-btn" @click="handleCollect">
          <u-icon name="star" size="18" :color="isCollected ? '#ffa502' : '#999'"></u-icon>
          <text class="btn-text" :class="{ collected: isCollected }">{{ isCollected ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
      
      <view class="action-right">
        <view class="contact-btn" @click="handleContact">
          <text class="btn-text">联系服务商</text>
        </view>
        <view class="order-btn" @click="handleOrder">
          <text class="btn-text">立即预约</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 服务详情数据
const serviceDetail = reactive({
  id: 1,
  title: '家庭深度保洁',
  category: 'cleaning',
  categoryText: '清洁服务',
  description: '专业保洁团队，提供家庭深度清洁服务，让您的家焕然一新。',
  price: 120,
  rating: 4.8,
  provider: '绿洁家政服务公司',
  serviceArea: '社区内及周边5公里',
  serviceTime: '8:00-18:00',
  contactPhone: '400-123-4567',
  image: 'https://example.com/images/cleaning-service.jpg',
  content: `
    <p>我们的家庭深度保洁服务包括：</p>
    <p><strong>客厅清洁：</strong></p>
    <ul>
      <li>地面清洁、拖地、吸尘</li>
      <li>家具表面清洁、除尘</li>
      <li>窗户清洁、玻璃擦拭</li>
      <li>灯具清洁、开关面板清洁</li>
    </ul>
    <p><strong>卧室清洁：</strong></p>
    <ul>
      <li>床铺整理、被褥更换</li>
      <li>衣柜整理、衣物分类</li>
      <li>地面清洁、家具除尘</li>
      <li>床头柜、梳妆台清洁</li>
    </ul>
    <p><strong>厨房清洁：</strong></p>
    <ul>
      <li>灶台、油烟机清洁</li>
      <li>冰箱内外清洁</li>
      <li>水槽、水龙头清洁</li>
      <li>橱柜内外清洁</li>
    </ul>
    <p><strong>卫生间清洁：</strong></p>
    <ul>
      <li>马桶清洁、消毒</li>
      <li>浴缸、淋浴房清洁</li>
      <li>洗手台、镜子清洁</li>
      <li>地面清洁、防滑处理</li>
    </ul>
  `,
  process: [
    {
      title: '在线预约',
      description: '选择服务时间，填写服务需求'
    },
    {
      title: '确认订单',
      description: '客服确认订单详情，安排服务人员'
    },
    {
      title: '上门服务',
      description: '专业保洁人员按时上门服务'
    },
    {
      title: '服务验收',
      description: '客户验收服务效果，确认满意'
    },
    {
      title: '完成支付',
      description: '服务完成后进行费用结算'
    }
  ],
  guarantees: [
    '专业团队，经验丰富',
    '服务不满意可重新服务',
    '24小时客服支持',
    '服务人员背景调查',
    '服务过程全程监督'
  ],
  reviews: [
    {
      userName: '张女士',
      rating: 5,
      time: '2025-01-20',
      content: '服务很专业，保洁人员很细心，家里打扫得很干净，下次还会选择。'
    },
    {
      userName: '李先生',
      rating: 4,
      time: '2025-01-18',
      content: '价格合理，服务态度好，保洁效果不错，推荐给大家。'
    },
    {
      userName: '王女士',
      rating: 5,
      time: '2025-01-15',
      content: '非常满意，保洁人员很专业，家里焕然一新，值得推荐。'
    }
  ]
})

// 用户操作状态
const isLiked = ref(false)
const isCollected = ref(false)

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 分享功能
const handleShare = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: 'https://example.com/service/1',
    title: serviceDetail.title,
    summary: serviceDetail.description,
    imageUrl: serviceDetail.image,
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '分享失败',
        icon: 'error'
      })
    }
  })
}

// 拨打电话
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: serviceDetail.contactPhone,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'error'
      })
    }
  })
}

// 点赞功能
const handleLike = () => {
  isLiked.value = !isLiked.value
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '取消点赞',
    icon: 'success'
  })
}

// 收藏功能
const handleCollect = () => {
  isCollected.value = !isCollected.value
  uni.showToast({
    title: isCollected.value ? '收藏成功' : '取消收藏',
    icon: 'success'
  })
}

// 联系服务商
const handleContact = () => {
  uni.navigateTo({
    url: `/pages/more-services/chat?serviceId=${serviceDetail.id}`
  })
}

// 立即预约
const handleOrder = () => {
  uni.navigateTo({
    url: `/pages/more-services/order?id=${serviceDetail.id}`
  })
}

// 页面加载
onMounted(() => {
  console.log('服务详情页面加载完成')
})
</script>

<style lang="scss" scoped>
.service-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  background: linear-gradient(135deg, #666 0%, #999 100%);
  padding: 20rpx 30rpx;
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .back-btn,
    .share-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
  }
}

.service-content {
  .service-image {
    position: relative;
    width: 100%;
    height: 400rpx;
    
    .image {
      width: 100%;
      height: 100%;
    }
    
    .service-badges {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      display: flex;
      gap: 12rpx;
      
      .category-badge,
      .rating-badge {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
        
        &.category-badge {
          background-color: #1890ff;
          color: #fff;
        }
        
        &.rating-badge {
          background-color: #faad14;
          color: #fff;
        }
      }
    }
  }
  
  .service-info {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .service-title {
        flex: 1;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        margin-right: 20rpx;
      }
      
      .service-price {
        .price-text {
          font-size: 32rpx;
          font-weight: 600;
          color: #ff4d4f;
          
          &.free {
            color: #52c41a;
          }
        }
      }
    }
    
    .info-body {
      margin-bottom: 30rpx;
      
      .service-description {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
    
    .info-meta {
      .meta-item {
        display: flex;
        align-items: center;
        gap: 20rpx;
        margin-bottom: 24rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .meta-content {
          flex: 1;
          
          .meta-label {
            display: block;
            font-size: 24rpx;
            color: #999;
            margin-bottom: 8rpx;
          }
          
          .meta-value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }
        }
      }
    }
  }
  
  .service-details,
  .service-process,
  .service-guarantee,
  .service-reviews {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 20rpx;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
      
      .review-count {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .details-content {
      :deep(p) {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }
      
      :deep(strong) {
        font-weight: 600;
        color: #666;
      }
      
      :deep(ul) {
        margin: 20rpx 0;
        padding-left: 40rpx;
        
        li {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
          margin-bottom: 12rpx;
        }
      }
    }
    
    .process-content {
      .process-item {
        display: flex;
        align-items: flex-start;
        gap: 20rpx;
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .step-number {
          width: 40rpx;
          height: 40rpx;
          background-color: #666;
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          font-weight: 600;
          flex-shrink: 0;
        }
        
        .step-content {
          flex: 1;
          
          .step-title {
            display: block;
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .step-description {
            font-size: 26rpx;
            color: #666;
            line-height: 1.5;
          }
        }
      }
    }
    
    .guarantee-content {
      .guarantee-item {
        display: flex;
        align-items: center;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .guarantee-icon {
          width: 32rpx;
          height: 32rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .guarantee-text {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          line-height: 1.5;
        }
      }
    }
    
    .reviews-content {
      .review-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .review-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12rpx;
          
          .user-info {
            display: flex;
            align-items: center;
            gap: 12rpx;
            
            .user-name {
              font-size: 26rpx;
              color: #333;
              font-weight: 500;
            }
          }
          
          .review-time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .review-content {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .action-left {
    display: flex;
    gap: 40rpx;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      
      .btn-text {
        font-size: 24rpx;
        color: #999;
        
        &.liked {
          color: #ff4757;
        }
        
        &.collected {
          color: #ffa502;
        }
      }
    }
  }
  
  .action-right {
    display: flex;
    gap: 20rpx;
    
    .contact-btn {
      padding: 20rpx 40rpx;
      background-color: #f0f0f0;
      border-radius: 40rpx;
      transition: all 0.3s ease;
      
      &:active {
        background-color: #e6e6e6;
      }
      
      .btn-text {
        font-size: 26rpx;
        color: #333;
      }
    }
    
    .order-btn {
      padding: 20rpx 40rpx;
      background-color: #666;
      border-radius: 40rpx;
      transition: all 0.3s ease;
      
      &:active {
        background-color: #555;
      }
      
      .btn-text {
        font-size: 26rpx;
        color: #fff;
      }
    }
  }
}
</style>
